<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
         <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
         <el-breadcrumb-item>排片列表</el-breadcrumb-item>
         </el-breadcrumb>
     <el-divider></el-divider>
      <p><span style="color:#409eff;font-weight:bold">{{CinemaRoomInfo.cinema_name}}</span>
     的 <span style="color:#409eff;font-weight:bold">{{CinemaRoomInfo.cinema_room_name}}（{{CinemaRoomInfo.cinema_room_type}}）
        </span>的拍片计划表</p>
        <template v-if="!tableData">
         <el-empty description="该放映厅暂无排片计划"></el-empty>   
         <el-button type="primary" plain @click="$router.push(`/home/showingon-plan/${cinema_room_id}`)">新增排片计划</el-button>  
        </template>
        <template v-else>
            <el-table :data="tableData">
                <el-table-column prop="title" label="电影名称"></el-table-column>
                <el-table-column prop="showingon_date" label="放映时间" width="180"></el-table-column>
                <el-table-column prop="showingon_time" label="场次" width="180"></el-table-column>
                <el-table-column prop="price" label="票价" width="180"></el-table-column>
                <el-table-column  label="是否已发布" width="180">
                    <template slot-scope="scope">
                        <el-switch
                         :active-value="1"
                         :inactive-value="0"
                         v-model="scope.row.status"
                         @change="ChangStatus(scope.row.status,scope.row.plan_id)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="movie_name" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="danger"
                    icon="el-icon-delete"
                    circle
                    title="删除计划"
                    @click="ondelete(scope.row.plan_id)"
                    ></el-button>
                  </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                CinemaRoomInfo:{},//放映厅信息
                cinema_room_id:this.$route.params.id,//放映厅id
                tableData:[],//排片列表
            }
        },
        methods: {
            ChangStatus(val,id){
                if( val ==0 ){
                    this.noPublist(id)
                }else{
                    this.Publish(id)
                }
            },
            /**
             * 设置为发布状态
             */
            Publish(id){
                this.$http.showingonPlan.publist({id:id}).then(res => {
                    console.log(res)
                    if(res.data.code == 200 ){
                        this.$message.success('该计划发布成功')
                    }
                })
            },
             /**
             * 设置为未发布状态
             */
            noPublist(id){
                this.$http.showingonPlan.noPublist({id:id}).then(res => {
                    console.log(res)
                    if(res.data.code == 200 ){
                        this.$message.warning('已取消发布')
                    }
                })
            },
            /**
             * 删除拍片计划
             */
            ondelete(id){
         const h = this.$createElement;
          this.$msgbox({
          title: '删除电影院 ',
          message: h('p', null, [
            h('span', null, '确认要删除该拍片计划吗？ '),
            h('i', { style: 'color: teal' })
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '正在删除...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 800);
            } else {
              done();
            }
          }
        }).then(action => {
            this.$http.showingonPlan.del({id:id}).then(res => {
                if(res.data.code == 200){
                    this.$message({
                      type: 'success',
                       message:'删除成功', 
                    });   
                  this.loadShowingonPlans()
                }
            })    
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
            },
            /**
             * 加载放映厅基本信息
             */
            loadCurrentCinemaRoom(){
                this.$http.cinemaRoomApi.queryByid({id:this.cinema_room_id}).then(res => {
                    console.log(res)
                    if(res.data.code == 200){
                        this.CinemaRoomInfo = res.data.data
                    }
                })  
            },
            //通过放映厅id请求拍片计划
            loadShowingonPlans(){
            this.$http.showingonPlan.queryByRoomid({room_id:this.cinema_room_id}).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    this.tableData = res.data.data
                }
            })
            }
        },
        mounted () {
            //加载放映厅信息
            this.loadCurrentCinemaRoom()
            this.loadShowingonPlans()
        },
    }
</script>

<style lang="scss" scoped>

</style>